<template>
  <div class="container">
    <el-select
      class="select-box"
      v-model="factoryId"
      @change="handleFactoryChange"
      :popper-append-to-body="false"
    >
      <el-option
        v-for="factory in factoryOptions"
        :key="factory.factoryId"
        :label="factory.factoryName"
        :value="factory.factoryId"
      />
    </el-select>
    <div class="title">
      <div style="width: 33.3%; height: 50%" />
      <div class="title-center">
        <div :color="['#568aea', '#000000']" style="width: 25%; height: 50%" />
        <!-- <div class="title-main">
                    <span class="title-text">
                        <i @click="handleLast" class="el-icon-d-arrow-left" style="font-size:28px;color:#568aea;"></i>
                        {{ workshopName }}
                        <i @click="handleNext" class="el-icon-d-arrow-right" style="font-size:28px;color:#568aea;"></i>
                    </span>
          <div class="title-bototm" :reverse="true" :color="['#50e3c2', '#67a1e5']"
               style="width: 100%; height: 1vh" />
        </div> -->
        <div
          :color="['#568aea', '#000000']"
          :reverse="true"
          style="width: 25%; height: 50%"
        />
      </div>
      <div style="width: 33.3%; height: 50%; transform: rotateY(180deg)" />
    </div>

    <el-row>
      <el-col :offset="3" :span="16">
        <div class="device-status">
          <div class="center-pump" style="float: left">
            <div class="box-center-pump">
              <ControllerDevice
                :color="imms_1_color"
                :device-name="imms_1_name"
              />
              <touch-device
                :color="imms_5_color"
                :device-name="imms_5_name"
                style="margin-bottom: 10px"
              />
              <hr class="box-center-pump-line" />
            </div>
            <div class="box-center-pump">
              <ControllerDevice
                :color="imms_2_color"
                :device-name="imms_2_name"
              />
              <touch-device
                :color="imms_6_color"
                :device-name="imms_6_name"
                style="margin-bottom: 10px"
              />
              <hr class="box-center-pump-line" />
            </div>
            <div class="box-center-pump">
              <ControllerDevice
                :color="imms_3_color"
                :device-name="imms_3_name"
              />
              <touch-device
                :color="imms_7_color"
                :device-name="imms_7_name"
                style="margin-bottom: 10px"
              />
              <hr class="box-center-pump-line" />
            </div>
            <div class="box-center-pump">
              <ControllerDevice
                :color="imms_4_color"
                :device-name="imms_4_name"
              />
              <touch-device
                :color="imms_8_color"
                :device-name="imms_8_name"
                style="margin-bottom: 10px"
              />
              <hr class="box-center-pump-line" />
            </div>
            <br />
            <span style="float: right; margin-right: 100px">→排入空气</span>
            <hr class="box1-line-top" />
            <div class="box-one">
              <hr class="box1-line-node" />
              <centrifugal-pump
                :color="imms_9_color"
                :device-name="imms_9_name"
              />
              <hr class="box1-line" />
              <BallValve :color="imms_13_color" :device-name="imms_13_name" />
              <hr class="box1-line-node" />
            </div>
            <div class="box-one" style="margin-left: 30px">
              <hr class="box1-line-node" />
              <centrifugal-pump
                :color="imms_10_color"
                :device-name="imms_10_name"
              />
              <hr class="box1-line" />
              <BallValve :color="imms_14_color" :device-name="imms_14_name" />
              <hr class="box1-line-node" />
            </div>
            <div class="box-one" style="margin-left: 30px">
              <hr class="box1-line-node" />
              <centrifugal-pump
                :color="imms_11_color"
                :device-name="imms_11_name"
              />
              <hr class="box1-line" />
              <BallValve :color="imms_15_color" :device-name="imms_15_name" />
              <hr class="box1-line-node" />
            </div>
            <div class="box-one" style="margin-left: 30px">
              <hr class="box1-line-node" />
              <centrifugal-pump
                :color="imms_12_color"
                :device-name="imms_12_name"
              />
              <hr class="box1-line" />
              <BallValve :color="imms_16_color" :device-name="imms_16_name" />
              <hr class="box1-line-node" />
            </div>
            <div class="box1-valve" style="margin-left: 30px">
              <div>
                <ControllerDevice
                  :color="imms_17_color"
                  :device-name="imms_17_name"
                />
                <BallValve
                  :color="imms_56_color"
                  :device-name="imms_56_name"
                  style="float: left"
                />
              </div>

              <hr class="box1-value-line" />
            </div>
            <hr class="box1-line-tail" />
          </div>
          <div
            class="box-separation"
            style="width: 240px; height: 320px; display: inline-block"
          >
            <div style="position: absolute; margin-top: 40px; width: 240px">
              <div class="box-separation-valve">
                <hr class="box1-line-node" />
                <BallValve
                  :color="imms_19_color"
                  :device-name="imms_19_name"
                  style="display: inline-block"
                />
                <hr class="box1-line-node" />
              </div>
              <div class="box-separation-valve">
                <hr class="box1-line-node" />
                <BallValve
                  :color="imms_20_color"
                  :device-name="imms_20_name"
                  style="display: inline-block"
                />
                <hr class="box1-line-node" />
              </div>
              <div class="box-separation-valve">
                <hr class="box1-line-node" />
                <BallValve
                  :color="imms_21_color"
                  :device-name="imms_21_name"
                  style="display: inline-block"
                />
                <hr class="box1-line-node" />
              </div>
              <Cistern
                :color="imms_18_color"
                :device-name="imms_18_name"
                :width="'150px'"
                :length="'150px'"
              />
            </div>
            <div class="separation-valve-solid">
              <div class="separation-valve-solid-elec">
                <hr class="box2-line" style="margin-top: 165px" />
                <div style="float: left; margin-top: -45px">
                  <controller-device
                    :color="imms_22_color"
                    :device-name="imms_22_name"
                  />
                  <touch-device
                    :color="imms_23_color"
                    :device-name="imms_23_name"
                  />
                  <ElectricalMachinery
                    :color="imms_24_color"
                    :device-name="imms_24_name"
                  />
                  <touch-device
                    :color="imms_25_color"
                    :device-name="imms_25_name"
                  />
                  <ControllerDevice
                    :color="imms_26_color"
                    :device-name="imms_26_name"
                  />
                </div>

                <hr class="box2-line" style="margin-top: 165px" />
                <div style="float: left; margin-top: 35px">
                  <ControllerDevice
                    :color="imms_71_color"
                    :device-name="imms_71_name"
                  />
                  <BallValve
                    :color="imms_28_color"
                    :device-name="imms_28_name"
                  />
                </div>

                <hr class="box2-line" style="margin-top: 165px" />
              </div>
            </div>
          </div>
          <br />
          <div class="vacuo-auxiliary" style="float: left">
            <div class="box2-tow">
              <hr class="box2-line-node" />
              <div style="margin-left: -20px">
                <ControllerDevice
                  :color="imms_57_color"
                  :device-name="imms_57_name"
                  style="display: inline-block"
                />
                <BallValve
                  :color="imms_58_color"
                  :device-name="imms_58_name"
                  style="display: inline-block"
                />
              </div>

              <hr class="box2-line-node" />
              <Cistern :color="imms_30_color" :device-name="imms_30_name" />
              <hr class="box2-line-node" />
              <hr class="box2-line-tail" style="width: 40px" />
            </div>
            <div class="box2-valve">
              <div>
                <controller-device
                  :color="imms_31_color"
                  :device-name="imms_31_name"
                />
                <touch-device
                  :color="imms_32_color"
                  :device-name="imms_32_name"
                />
                <ElectricalMachinery
                  :color="imms_33_color"
                  :device-name="imms_33_name"
                  style="float: left"
                />
              </div>

              <hr class="box2-line" />
              <BallValve
                :color="imms_34_color"
                :device-name="imms_34_name"
                style="float: left"
              />
              <hr class="auxiliary-line" />
            </div>
          </div>
          <div class="box-pure">
            <div class="box-pure-valve">
              <hr class="box1-line-node" />
              <BallValve
                :color="imms_35_color"
                :device-name="imms_35_name"
                style="display: inline-block"
              />
              <hr class="box1-line-node" />
            </div>
            <Cistern
              :color="imms_36_color"
              :device-name="imms_36_name"
              :width="'150px'"
              :length="'150px'"
              style="position: absolute"
            />
          </div>
          <div class="pure-valve">
            <div class="pure-valve-out">
              <hr class="box2-line" style="margin-top: 30px; width: 130px" />
              <div style="float: left; margin-top: -200px">
                <controller-device
                  :color="imms_37_color"
                  :device-name="imms_37_name"
                />
                <touch-device
                  :color="imms_38_color"
                  :device-name="imms_38_name"
                />
                <ElectricalMachinery
                  :color="imms_39_color"
                  :device-name="imms_39_name"
                  style="float: left"
                />
              </div>
              <div style="margin-left: 180px">
                <hr class="box2-line" />
                <BallValve
                  :color="imms_40_color"
                  :device-name="imms_40_name"
                  style="float: left"
                />
                <hr class="box2-line" />
              </div>
            </div>
          </div>
          <div class="pure-valve-out-line-box">
            <hr class="pure-valve-out-line1" />
          </div>
          <div class="pure-valve-out-line-box2">
            <hr class="pure-valve-out-line2" />
          </div>
          <div class="storage-liquid">
            <div class="storage-liquid-box">
              <div style="width: 100px; height: 100px; margin-left: 20px">
                <PaperFilter
                  :color="imms_41_color"
                  :device-name="imms_41_name"
                />
              </div>
              <div style="width: 150px; height: 150px; margin-top: 30px">
                <Cistern
                  :color="imms_42_color"
                  :device-name="imms_42_name"
                  :width="'150px'"
                  :length="'150px'"
                />
              </div>
              <div class="storage-liquid-out-box1">
                <hr class="storage-liquid-out1" />
              </div>
              <div class="storage-liquid-out-box2">
                <hr class="storage-liquid-out2" />
              </div>
              <div class="storage-liquid-valve1">
                <div class="pure-valve-out">
                  <hr class="box2-line" />
                  <div style="float: left; margin-top: -136px">
                    <controller-device
                      :color="imms_43_color"
                      :device-name="imms_43_name"
                    />
                    <touch-device
                      :color="imms_44_color"
                      :device-name="imms_44_name"
                    />
                    <ElectricalMachinery
                      :color="imms_45_color"
                      :device-name="imms_45_name"
                      style="float: left"
                    />
                  </div>
                  <hr class="box2-line" />
                  <BallValve
                    :color="imms_46_color"
                    :device-name="imms_46_name"
                    style="float: left"
                  />
                  <hr class="box2-line" />
                </div>
              </div>
            </div>
          </div>
          <br style="position: absolute" />
          <div class="storage-liquid-line">
            <hr style="border: solid 3px #000000; width: 635px" />
          </div>
          <div class="water-supply">
            <hr
              class="box1-line-node"
              style="position: absolute; margin-left: 242px"
            />
            <hr class="water-supply-line" style="margin-top: 20px" />
            <div class="water-supply-box">
              <hr class="box1-line-node" />
              <div class="water-supply-elec">
                <FrequencyConverter
                  :color="imms_48_color"
                  :device-name="imms_48_name"
                  style="display: inline-block; margin-right: 10px"
                />
                <ElectricalMachinery
                  :color="imms_47_color"
                  :device-name="imms_47_name"
                  style="display: inline-block"
                />
              </div>
              <hr class="box1-line" />
              <BallValve
                :color="imms_53_color"
                :device-name="imms_53_name"
                class="water-supply-valve"
              />
              <hr class="box1-line-node" />
            </div>
            <div class="water-supply-box">
              <hr class="box1-line-node" />
              <div class="water-supply-elec">
                <FrequencyConverter
                  :color="imms_50_color"
                  :device-name="imms_50_name"
                  style="display: inline-block; margin-right: 10px"
                />
                <ElectricalMachinery
                  :color="imms_49_color"
                  :device-name="imms_49_name"
                  style="display: inline-block"
                />
              </div>
              <hr class="box1-line" />
              <BallValve
                :color="imms_54_color"
                :device-name="imms_54_name"
                class="water-supply-valve"
              />
              <hr class="box1-line-node" />
            </div>
            <div class="water-supply-box">
              <hr class="box1-line-node" />
              <div class="water-supply-elec">
                <FrequencyConverter
                  :color="imms_52_color"
                  :device-name="imms_52_name"
                  style="display: inline-block; margin-right: 10px"
                />
                <ElectricalMachinery
                  :color="imms_51_color"
                  :device-name="imms_51_name"
                  style="display: inline-block"
                />
              </div>

              <hr class="box1-line" />
              <BallValve
                :color="imms_55_color"
                :device-name="imms_55_name"
                class="water-supply-valve"
              />
              <hr class="box1-line-node" />
            </div>
            <hr class="water-supply-line" />
            <hr class="water-supply-node" />
          </div>
        </div>
      </el-col>
      <el-col :offset="2" :span="3">
        <div class="status-color">
          <div
            style="width: 40px; height: 20px; background-color: #909399"
          ></div>
          <span>离线</span>
          <div
            style="width: 40px; height: 20px; background-color: #f5a33e"
          ></div>
          <span>待机</span>
          <div style="width: 40px; height: 20px; background-color: green"></div>
          <span>运行</span>
          <div style="width: 40px; height: 20px; background-color: red"></div>
          <span>故障</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CentrifugalPump from "@/views/components/deviceSvg/Centrifugal-pump";
import VacuumPump from "@/views/components/deviceSvg/Vacuum-pump";
import FrequencyConverter from "@/views/components/deviceSvg/Frequency-converter";
import ElectricalMachinery from "@/views/components/deviceSvg/Electrical-machinery";
import Valve from "@/views/components/deviceSvg/Valve";
import RightAnglePipe from "@/views/components/deviceSvg/Right-angle-pipe";
import Cistern from "@/views/components/deviceSvg/Cistern";
import Pipeline from "@/views/components/deviceSvg/Pipeline";
import LowCistern from "@/views/components/deviceSvg/Low-Cistern";
import { listFactory } from "@/api/imms/factory";
import { listWorkshop, pageWorkshop } from "@/api/imms/workshop";
import BallValve from "@/views/components/deviceSvg/Ball-Valve";
import PaperFilter from "@/views/components/deviceSvg/Paper-Filter";
import { getDeviceStatus } from "@/api/imms/device";
import TouchDevice from "@/views/components/deviceSvg/TouchDevice";
import ControllerDevice from "@/views/components/deviceSvg/ControllerDevice";
export default {
  name: "Index",
  components: {
    ControllerDevice,
    TouchDevice,
    PaperFilter,
    BallValve,
    LowCistern,
    Pipeline,
    Cistern,
    RightAnglePipe,
    Valve,
    ElectricalMachinery,
    FrequencyConverter,
    VacuumPump,
    CentrifugalPump,
  },
  data() {
    return {
      // 版本号
      version: "3.8.1",
      factoryOptions: [],
      factoryId: 0,
      workshopOptions: [],
      workshopId: 0,
      workshopName: "",
      imms_1_color: "#A9A9A9",
      imms_2_color: "#A9A9A9",
      imms_3_color: "#A9A9A9",
      imms_4_color: "#A9A9A9",
      imms_5_color: "#A9A9A9",
      imms_6_color: "#A9A9A9",
      imms_7_color: "#A9A9A9",
      imms_8_color: "#A9A9A9",
      imms_9_color: "#A9A9A9",
      imms_10_color: "#A9A9A9",
      imms_11_color: "#A9A9A9",
      imms_12_color: "#A9A9A9",
      imms_13_color: "#A9A9A9",
      imms_14_color: "#A9A9A9",
      imms_15_color: "#A9A9A9",
      imms_16_color: "#A9A9A9",
      imms_17_color: "#A9A9A9",
      imms_18_color: "#A9A9A9",
      imms_19_color: "#A9A9A9",
      imms_20_color: "#A9A9A9",
      imms_21_color: "#A9A9A9",
      imms_22_color: "#A9A9A9",
      imms_23_color: "#A9A9A9",
      imms_24_color: "#A9A9A9",
      imms_25_color: "#A9A9A9",
      imms_26_color: "#A9A9A9",
      imms_27_color: "#A9A9A9",
      imms_28_color: "#A9A9A9",
      imms_29_color: "#A9A9A9",
      imms_30_color: "#A9A9A9",
      imms_31_color: "#A9A9A9",
      imms_32_color: "#A9A9A9",
      imms_33_color: "#A9A9A9",
      imms_34_color: "#A9A9A9",
      imms_35_color: "#A9A9A9",
      imms_36_color: "#A9A9A9",
      imms_37_color: "#A9A9A9",
      imms_38_color: "#A9A9A9",
      imms_39_color: "#A9A9A9",
      imms_40_color: "#A9A9A9",
      imms_41_color: "#A9A9A9",
      imms_42_color: "#A9A9A9",
      imms_43_color: "#A9A9A9",
      imms_44_color: "#A9A9A9",
      imms_45_color: "#A9A9A9",
      imms_46_color: "#A9A9A9",
      imms_47_color: "#A9A9A9",
      imms_48_color: "#A9A9A9",
      imms_49_color: "#A9A9A9",
      imms_50_color: "#A9A9A9",
      imms_51_color: "#A9A9A9",
      imms_52_color: "#A9A9A9",
      imms_53_color: "#A9A9A9",
      imms_54_color: "#A9A9A9",
      imms_55_color: "#A9A9A9",
      imms_56_color: "#A9A9A9",
      imms_57_color: "#A9A9A9",
      imms_58_color: "#A9A9A9",
      imms_64_color: "#A9A9A9",

      imms_67_color: "#A9A9A9",
      imms_68_color: "#A9A9A9",
      imms_69_color: "#A9A9A9",
      imms_71_color: "#A9A9A9",

      imms_1_name: "1#真空泵电机控制",
      imms_2_name: "2#真空泵电机控制",
      imms_3_name: "3#真空泵电机控制",
      imms_4_name: "4#真空泵电机控制",
      imms_5_name: "1#真空泵接触器异常",
      imms_6_name: "2#真空泵接触器异常",
      imms_7_name: "3#真空泵接触器异常",
      imms_8_name: "4#真空泵接触器",
      imms_9_name: "1#真空泵过载",
      imms_10_name: "2#真空泵过载",
      imms_11_name: "3#真空泵过载",
      imms_12_name: "4#真空泵过载",
      imms_13_name: "1#真空泵球阀卡",
      imms_14_name: "2#真空泵球阀卡",
      imms_15_name: "3#真空泵球阀卡",
      imms_16_name: "4#真空泵球阀卡",
      imms_17_name: "切屑分离罐真空进气球阀开",
      imms_18_name: "分离罐负压",
      imms_19_name: "切屑分离罐1#进罐球阀开",
      imms_20_name: "切屑分离罐2#进罐球阀开",
      imms_21_name: "切屑分离罐3#进罐球阀开",
      imms_22_name: "排屑电机正转控制",
      imms_23_name: "排屑电机正转接触器",
      imms_24_name: "排屑电机过载",
      imms_25_name: "排屑电机反转接触器",
      imms_26_name: "排屑电机反转控制",
      imms_27_name: "排屑电机接触器异常",
      imms_28_name: "分离罐出屑球阀开到位",
      imms_29_name: "分离罐进气阀开到位",
      imms_30_name: "真空罐负压",
      imms_31_name: "真空罐排水电机控制",
      imms_32_name: "真空罐排水电机接触器异常",
      imms_33_name: "真空罐排水电机过载",
      imms_34_name: "真空罐排水球阀",
      imms_35_name: "切屑分离罐出水蝶阀开",
      imms_36_name: "净液罐水位",
      imms_37_name: "净液罐排水电机控制",
      imms_38_name: "净液罐排水电机接触器异常",
      imms_39_name: "净液罐排水电机过载",
      imms_40_name: "净液罐排水球阀",
      imms_41_name: "滤袋机电机",
      imms_42_name: "储液罐水位",
      imms_43_name: "储液罐排水电机控制",
      imms_44_name: "储液罐排水电机接触器异常",
      imms_45_name: "储液罐排水电机过载",
      imms_46_name: "储液罐排水球阀",
      imms_47_name: "1#供液泵电机控制",
      imms_48_name: "1#供液泵变频器异常",
      imms_49_name: "2#供液泵电机控制",
      imms_50_name: "2#供液泵变频器异常",
      imms_51_name: "3#供液泵电机控制",
      imms_52_name: "3#供液泵变频器异常",
      imms_53_name: "1#供液泵进出球阀卡",
      imms_54_name: "2#供液泵进出球阀卡",
      imms_55_name: "3#供液泵进出球阀卡",
      imms_56_name: "分离罐进气球阀卡",
      imms_57_name: "真空罐抽气球阀开",
      imms_58_name: "真空罐进气球阀卡",

      imms_64_name: "运行时储液罐水位低",

      imms_67_name: "切屑液总液位低",
      imms_68_name: "切屑液总液位高",
      imms_69_name: "排屑时净液罐与储液罐水位同时高",
      imms_71_name: "切屑分离罐出罐球阀开",
    };
  },
  mounted() {
    this.getFactory();
    this.getDeviceStatus();
    this.intervalId = setInterval(this.getDeviceStatus, 5000); // 每5秒刷新一次
  },
  beforeUnmount() {
    // 在组件卸载前清除定时器
    clearInterval(this.intervalId);
  },
  methods: {
    getFactory() {
      listFactory().then((response) => {
        this.factoryOptions = response.data;
        this.factoryId = response.data[0].factoryId;
        this.getWorkshop();
      });
    },
    handleFactoryChange() {
      this.workshopId = 0;
      this.getWorkshop();
    },
    getWorkshop() {
      pageWorkshop({
        factoryId: this.factoryId,
        pageNum: 1,
        pageSize: 1000,
      }).then((res) => {
        this.workshopOptions = res.records;
        this.workshopName = res.records[this.workshopId].workshopName;
        this.workshopId = res.records[this.workshopId].id;
        // this.checkIsNew();
      });
    },
    /**
     * 切换到下个车间
     */
    handleNext() {
      if (this.workshopId < this.workshopOptions.length - 1) {
        this.workshopId++;
        this.workshopName = this.workshopOptions[this.workshopId].workshopName;
        this.workshopId = this.workshopOptions[this.workshopId].id;
        // this.checkIsNew();
      }
    },
    /**
     * 切换到上个车间
     */
    handleLast() {
      if (this.workshopId > 0) {
        this.workshopId--;
        this.workshopName = this.workshopOptions[this.workshopId].workshopName;
        this.workshopId = this.workshopOptions[this.workshopId].id;
        // this.checkIsNew();
      }
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getDeviceStatus() {
      const queryId = this.workshopId === 0 ? 1 : this.workshopId;
      getDeviceStatus(queryId)
        .then((response) => {
          const deviceStatusMap = response.data;
          for (const [key, value] of Object.entries(deviceStatusMap)) {
            switch (key) {
              case "imms_1":
                if (value === "0") this.imms_1_color = "#f5a33e";
                else if (value === "1") this.imms_1_color = "#2aa515";
                break;
              case "imms_2":
                if (value === "0") this.imms_2_color = "#f5a33e";
                else if (value === "1") this.imms_2_color = "#2aa515";
                break;
              case "imms_3":
                if (value === "0") this.imms_3_color = "#f5a33e";
                else if (value === "1") this.imms_3_color = "#2aa515";
                break;
              case "imms_4":
                if (value === "0") this.imms_4_color = "#f5a33e";
                else if (value === "1") this.imms_4_color = "#2aa515";
                break;
              case "imms_5":
                if (value === "0") this.imms_5_color = "#2aa515";
                else if (value === "1") this.imms_5_color = "#f1042f";
                break;
              case "imms_6":
                if (value === "0") this.imms_6_color = "#2aa515";
                else if (value === "1") this.imms_6_color = "#f1042f";
                break;
              case "imms_7":
                if (value === "0") this.imms_7_color = "#2aa515";
                else if (value === "1") this.imms_7_color = "#f1042f";
                break;
              case "imms_8":
                if (value === "0") this.imms_8_color = "#f5a33e";
                else if (value === "1") this.imms_8_color = "#2aa515";
                break;
              case "imms_9":
                if (value === "0") this.imms_9_color = "#2aa515";
                else if (value === "1") this.imms_9_color = "#f1042f";
                break;
              case "imms_10":
                if (value === "0") this.imms_10_color = "#2aa515";
                else if (value === "1") this.imms_10_color = "#f1042f";
                break;
              case "imms_11":
                if (value === "0") this.imms_11_color = "#2aa515";
                else if (value === "1") this.imms_11_color = "#f1042f";
                break;
              case "imms_12":
                if (value === "0") this.imms_12_color = "#2aa515";
                else if (value === "1") this.imms_12_color = "#f1042f";
                break;
              case "imms_13":
                if (value === "0") this.imms_13_color = "#2aa515";
                else if (value === "1") this.imms_13_color = "#f1042f";
                break;
              case "imms_14":
                if (value === "0") this.imms_14_color = "#2aa515";
                else if (value === "1") this.imms_14_color = "#f1042f";
                break;
              case "imms_15":
                if (value === "0") this.imms_15_color = "#2aa515";
                else if (value === "1") this.imms_15_color = "#f1042f";
                break;
              case "imms_16":
                if (value === "0") this.imms_16_color = "#2aa515";
                else if (value === "1") this.imms_16_color = "#f1042f";
                break;
              case "imms_17":
                if (value === "0") this.imms_17_color = "#f5a33e";
                else if (value === "1") this.imms_17_color = "#2aa515";
                break;
              case "imms_18":
                if (value === "0") this.imms_18_color = "#2aa515";
                else if (value === "1") this.imms_18_color = "#f1042f";
                break;
              case "imms_19":
                if (value === "0") this.imms_19_color = "#f5a33e";
                else if (value === "1") this.imms_19_color = "#2aa515";
                break;
              case "imms_20":
                if (value === "0") this.imms_20_color = "#f5a33e";
                else if (value === "1") this.imms_20_color = "#2aa515";
                break;
              case "imms_21":
                if (value === "0") this.imms_21_color = "#f5a33e";
                else if (value === "1") this.imms_21_color = "#2aa515";
                break;
              case "imms_22":
                if (value === "0") this.imms_22_color = "#f5a33e";
                else if (value === "1") this.imms_22_color = "#2aa515";
                break;
              case "imms_23":
                if (value === "0") this.imms_23_color = "#2aa515";
                else if (value === "1") this.imms_23_color = "#f1042f";
                break;
              case "imms_24":
                if (value === "0") this.imms_24_color = "#2aa515";
                else if (value === "1") this.imms_24_color = "#f1042f";
                break;
              case "imms_25":
                if (value === "0") this.imms_25_color = "#2aa515";
                else if (value === "1") this.imms_25_color = "#f1042f";
                break;
              case "imms_26":
                if (value === "0") this.imms_26_color = "#f5a33e";
                else if (value === "1") this.imms_26_color = "#2aa515";
                break;
              case "imms_27":
                if (value === "0") this.imms_27_color = "#2aa515";
                else if (value === "1") this.imms_27_color = "#f1042f";
                break;
              case "imms_28":
                if (value === "0") this.imms_28_color = "#f1042f";
                else if (value === "1") this.imms_28_color = "#2aa515";
                break;
              case "imms_29":
                if (value === "0") this.imms_29_color = "#f1042f";
                else if (value === "1") this.imms_29_color = "#2aa515";
                break;
              case "imms_30":
                if (value === "0") this.imms_30_color = "#2aa515";
                else if (value === "1") this.imms_30_color = "#f1042f";
                break;
              case "imms_31":
                if (value === "0") this.imms_31_color = "#f5a33e";
                else if (value === "1") this.imms_31_color = "#2aa515";
                break;
              case "imms_32":
                if (value === "0") this.imms_32_color = "#2aa515";
                else if (value === "1") this.imms_32_color = "#f1042f";
                break;
              case "imms_33":
                if (value === "0") this.imms_33_color = "#2aa515";
                else if (value === "1") this.imms_33_color = "#f1042f";
                break;
              case "imms_34":
                if (value === "0") this.imms_34_color = "#2aa515";
                else if (value === "1") this.imms_34_color = "#f1042f";
                break;
              case "imms_35":
                if (value === "0") this.imms_35_color = "#f5a33e";
                else if (value === "1") this.imms_35_color = "#2aa515";
                break;
              case "imms_36":
                if (value === "0") this.imms_36_color = "#2aa515";
                else if (value === "1") this.imms_36_color = "#f1042f";
                break;
              case "imms_37":
                if (value === "0") this.imms_37_color = "#f5a33e";
                else if (value === "1") this.imms_37_color = "#2aa515";
                break;
              case "imms_38":
                if (value === "0") this.imms_38_color = "#2aa515";
                else if (value === "1") this.imms_38_color = "#f1042f";
                break;
              case "imms_39":
                if (value === "0") this.imms_39_color = "#2aa515";
                else if (value === "1") this.imms_39_color = "#f1042f";
                break;
              case "imms_40":
                if (value === "0") this.imms_40_color = "#f5a33e";
                else if (value === "1") this.imms_40_color = "#2aa515";
                break;
              case "imms_41":
                if (value === "0") this.imms_41_color = "#2aa515";
                else if (value === "1") this.imms_41_color = "#f1042f";
                break;
              case "imms_42":
                if (value === "0") this.imms_42_color = "#2aa515";
                else if (value === "1") this.imms_42_color = "#f1042f";
                break;
              case "imms_43":
                if (value === "0") this.imms_43_color = "#f5a33e";
                else if (value === "1") this.imms_43_color = "#2aa515";
                break;
              case "imms_44":
                if (value === "0") this.imms_44_color = "#2aa515";
                else if (value === "1") this.imms_44_color = "#f1042f";
                break;
              case "imms_45":
                if (value === "0") this.imms_45_color = "#2aa515";
                else if (value === "1") this.imms_45_color = "#f1042f";
                break;
              case "imms_46":
                if (value === "0") this.imms_46_color = "#2aa515";
                else if (value === "1") this.imms_46_color = "#f1042f";
                break;
              case "imms_47":
                if (value === "0") this.imms_47_color = "#f5a33e";
                else if (value === "1") this.imms_47_color = "#2aa515";
                break;
              case "imms_48":
                if (value === "0") this.imms_48_color = "#2aa515";
                else if (value === "1") this.imms_48_color = "#f1042f";
                break;
              case "imms_49":
                if (value === "0") this.imms_49_color = "#f5a33e";
                else if (value === "1") this.imms_49_color = "#2aa515";
                break;
              case "imms_50":
                if (value === "0") this.imms_50_color = "#2aa515";
                else if (value === "1") this.imms_50_color = "#f1042f";
                break;
              case "imms_51":
                if (value === "0") this.imms_51_color = "#f5a33e";
                else if (value === "1") this.imms_51_color = "#2aa515";
                break;
              case "imms_52":
                if (value === "0") this.imms_52_color = "#2aa515";
                else if (value === "1") this.imms_52_color = "#f1042f";
                break;
              case "imms_53":
                if (value === "0") this.imms_53_color = "#2aa515";
                else if (value === "1") this.imms_53_color = "#f1042f";
                break;
              case "imms_54":
                if (value === "0") this.imms_54_color = "#2aa515";
                else if (value === "1") this.imms_54_color = "#f1042f";
                break;
              case "imms_55":
                if (value === "0") this.imms_55_color = "#2aa515";
                else if (value === "1") this.imms_55_color = "#f1042f";
                break;
              case "imms_56":
                if (value === "0") this.imms_56_color = "#2aa515";
                else if (value === "1") this.imms_56_color = "#f1042f";
                break;
              case "imms_57":
                if (value === "0") this.imms_57_color = "#f5a33e";
                else if (value === "1") this.imms_57_color = "#2aa515";
                break;
              case "imms_58":
                if (value === "0") this.imms_58_color = "#2aa515";
                else if (value === "1") this.imms_58_color = "#f1042f";
                break;
              case "imms_64":
                if (value === "0") this.imms_42_color = "#2aa515";
                else if (value === "1") this.imms_42_color = "#f1042f";
                break;
              case "imms_67":
                if (value === "0") this.imms_18_color = "#2aa515";
                else if (value === "1") this.imms_18_color = "#f1042f";
                break;
              case "imms_68":
                if (value === "0") this.imms_18_color = "#2aa515";
                else if (value === "1") this.imms_18_color = "#f1042f";
                break;
              case "imms_69":
                if (value === "0") {
                  this.imms_36_color = "#2aa515";
                  this.imms_42_color = "#2aa515";
                } else if (value === "1") {
                  this.imms_36_color = "#f1042f";
                  this.imms_42_color = "#f1042f";
                }

                break;
              case "imms_71":
                if (value === "0") this.imms_71_color = "#f5a33e";
                else if (value === "1") this.imms_71_color = "#2aa515";
                break;

                break;
              // 在这里添加其他设备的处理逻辑
            }
          }
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  overflow-x: auto; /* 横向滚动条 */
}

.device-status {
  margin-top: 50px;
  //float: left;
  width: 100%; /* 父元素宽度 */
}
.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title-center {
    margin-top: 3vh;
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title-main {
      margin-top: 2.5vh;
      width: 60%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title-text {
        font-size: 36px;
        margin-bottom: 10px;
        color: black;
      }
    }
  }
}
.transfor-pipe {
  transform: rotate(90deg);
}
.align {
  margin-top: 50px;
}
.status-color {
  margin-top: 50px;
  margin-right: 100px;
  position: absolute;
}
.center-pump {
  width: 500px;
  height: 320px;
  display: inline-block;
  position: absolute;
}
.box-center-pump {
  display: inline-block;
  width: 50px;
  margin-left: 30px;
}
.box-center-pump-line {
  width: 26px;
  border: solid 3px #000000;
  transform: rotate(90deg);
  position: absolute;
}
.box-one {
  display: inline-block;
  width: 50px;
  margin-left: 20px;
}
.box1-line-top {
  margin-left: 40px;
  width: 380px;
  border: solid 3px #000000;
}
.box1-line-tail {
  position: absolute;
  margin-left: 40px;
  width: 360px;
  border: solid 3px #000000;
  position: absolute;
}
.box1-line {
  width: 26px;
  border: solid 3px #000000;
  transform: rotate(90deg);
}
.box1-line-node {
  width: 26px;
  border: solid 3px #000000;
  transform: rotate(90deg);
}
.box1-valve {
  float: right;
  margin-top: 95px;
  margin-right: 30px;
  width: 70px;
}
.box1-value-line {
  width: 20px;
  border: solid 3px #000000;
  float: right;
  margin-top: 27px;
}
.vacuo-auxiliary {
  display: inline-block;
  width: 320px;
  margin-top: -55px;
  margin-left: 150px;
}
.box2-line-node {
  width: 20px;
  border: solid 3px #000000;
  transform: rotate(90deg);
}
.box2-line-tail {
  margin-left: 57px;
  width: 30px;
  border: solid 3px #000000;
}
.box2-tow {
  width: 100px;
  height: 230px;
  margin-top: 60px;
}
.box2-valve {
  width: 400px;
  height: 50px;
  margin-left: 100px;
  margin-top: -190px;
}
.auxiliary-line {
  width: 130px;
  border: solid 3px #000000;
  float: left;
  margin-top: 27px;
}
.box2-line {
  width: 30px;
  border: solid 3px #000000;
  float: left;
  margin-top: 27px;
}
.box-separation {
  margin-left: 460px;
  margin-top: 140px;
}
.box-separation-valve {
  display: inline-block;
  width: 50px;
  margin-left: 5px;
}
.box-valve-line {
  float: right;
  width: 30px;
  border: solid 3px #000000;
}
.separation-valve-solid {
  width: 400px;
  margin-left: 150px;
  margin-top: 50px;
}
.separation-valve-solid-elec {
  margin-top: 100px;
}
.separation-line1-solid {
  width: 20px;
  border: solid 3px #000000;
  float: left;
  margin-top: 210px;
  margin-left: -15px;
}
.separation-line2-solid {
  width: 20px;
  border: solid 3px #000000;
  float: left;
  margin-top: 210px;
}
.box-pure {
  width: 150px;
  height: 300px;
  float: left;
  margin-top: 20px;
  margin-left: 470px;
  position: absolute;
}
.box-pure-valve {
  width: 50px;
  margin-left: 45px;
}
.pure-valve {
  position: absolute;
  display: inline-block;
  width: 220px;
  float: left;
  margin-top: 240px;
  margin-left: 133px;
}
.pure-valve-out {
  width: 350px;
}
.pure-valve-out-line-box {
  //width: 315px;
  //height:350px;
  display: inline-block;
  position: absolute;
  margin-left: 235px;
  margin-top: 70px;
}
.pure-valve-out-line1 {
  width: 370px;
  border: solid 3px #000000;
  transform: rotate(90deg);
  float: left;
}
.pure-valve-out-line-box2 {
  width: 250px;
  display: inline-block;
  position: absolute;
  margin-left: 250px;
  margin-top: 44px;
}
.pure-valve-out-line2 {
  width: 80px;
  border: solid 3px #000000;
  float: right;
  margin-top: -148px;
}
.storage-liquid {
  display: inline-block;
  position: absolute;
  margin-left: 250px;
}
.storage-liquid-box {
  float: left;
  margin-top: -105px;
  margin-left: 228px;
}
.storage-liquid-out-box1 {
  display: inline-block;
  width: 10px;
  height: 150px;
  margin-top: 60px;
  margin-left: 30px;
}
.storage-liquid-out-box2 {
  display: inline-block;
  width: 10px;
  height: 150px;
  margin-left: 70px;
}
.storage-liquid-out1 {
  width: 180px;
  border: solid 3px #000000;
  transform: rotate(90deg);
  float: left;
  margin-top: 20px;
}
.storage-liquid-out2 {
  width: 178px;
  border: solid 3px #000000;
  transform: rotate(90deg);
  float: right;
  margin-top: 20px;
}
.storage-liquid-valve1 {
  position: absolute;
  display: inline-block;
  width: 220px;
  float: left;
  margin-top: 140px;
}
.storage-liquid-line {
  margin-left: 345px;
  margin-top: 320px;
  position: absolute;
}
.water-supply {
  width: 520px;
  //height: 320px;
  display: inline-block;
  float: left;
  clear: both;
  margin-left: 93px;
  margin-bottom: 50px;
  //position: absolute;
  //background-color: #00afff;
}
.water-supply-box {
  display: inline-block;
  width: 150px;
  margin-left: 20px;
  //position: absolute;
}
.water-supply-line {
  margin-left: 90px;
  width: 350px;
  border: solid 3px #000000;
}
.water-supply-elec {
  margin-left: -20px;
}
.water-supply-valve {
  margin-left: 50px;
}
.water-supply-node {
  margin-top: 20px;
  width: 50px;
  border: solid 3px #000000;
  transform: rotate(90deg);
}
</style>
